<template>
  <HoverBar
    ref="hoverBarRef"
    @getHoverBarType="getHoverBarType"
    v-bind="hoverBarPosition"
    @click.stop
  />
  <section class="relative h-full w-full cursor-text border border-[#e5e7eb]">
    <Main />
    <Footer />
  </section>
  <NoteEditor />
</template>
<script lang="ts" setup>
import HoverBar from "./components/HoverBar/index.vue";
import NoteEditor from "./components/NoteEditor/index.vue";
import Main from "./components/Main/index.vue";
import Footer from "./components/Footer/index.vue";
import type { ArticleStylesKeys } from "@/store/modules/types";

import { useArticleStore } from "@/store/modules/article";
import { useNoteStore } from "@/store/modules/note";
import { executeHoverBarFunctions } from "./components/HoverBar";
import { hoverBarPosition, hoverBarRef } from "./state";
const noteStore = useNoteStore();
const articleStore = useArticleStore();
const router = useRouter();

function getHoverBarType(hoverBarType: ArticleStylesKeys) {
  hoverBarRef.value?.closeHoverBar();
  assignFunction(hoverBarType);
}

function assignFunction(hoverBarType: ArticleStylesKeys) {
  executeHoverBarFunctions[hoverBarType]!();
}

watch(
  () => articleStore.getCurrentArticle,
  (newVal) => {
    if (!newVal) {
      router.push("home");
    }
  }
);

function handleClose() {
  hoverBarRef.value?.getVisible() && hoverBarRef.value?.closeHoverBar();
  noteStore.isShowedNote && noteStore.closeNote();
}

const observeDocumentClick = (function () {
  let isObserve = false;
  return {
    observe() {
      if (!isObserve) {
        document.addEventListener("click", handleClose);
        isObserve = true;
      }
    },
    disconnect() {
      document.removeEventListener("click", handleClose);
      isObserve = false;
    },
  };
})();

onMounted(() => {
  observeDocumentClick.observe();
});

onUnmounted(() => {
  observeDocumentClick.disconnect();
});
</script>
<style lang="scss" scoped>
.note-editor-container {
  &::before {
    transform: rotateZ(-45deg);
    border: 1px solid #3d9efc;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    top: 13px;
    @apply absolute left-0 right-0 content-[''] h-2 w-2  mx-auto bg-white z-10;
  }
}
</style>
